<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字符串操作函数</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>

<body>
<h2><pre>
   调用名为$.trim的工具函数，能删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格，
    调用格式为：$.trim (str);参数str表示需要删除左右两边空格符的字符串。
</pre></h2>
<div id="divtest">
    <div class="title">
        <span class="fl">字符串操作函数</span>
                <span class="fr">
                    <input id="btnShow" name="btnShow" type="button" value="计算" />
                </span>
    </div>
    <div class="content">
        <input id="txtName" name="txtName" type="text" />
        <div class="tip"></div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $("#btnShow").bind("click", function () {
            $(".tip").html("");
            var strTmp = "内容：";
            var strOld = $("#txtName").val();
            var strNew =$.trim(strOld);
            strTmp += strOld;
            strTmp += "<br/><br>除掉空格符前的长度："
            strTmp += strOld.length;
            strTmp += "<br/><br>除掉空格符后的长度："
            strTmp += strNew.length;
            $(".tip").show().append(strTmp);
        });
    });
</script>
</body>
</html>